import React, { useRef } from "react"
import { Input, Select, DatePicker, Tooltip, Button, Tag } from "antd"
import { PlusOutlined } from "@ant-design/icons"
import Page from "@/components/layout/page/Page"
import DataTable from "@/components/table/DataTable"
import TableWrap from "@/components/tableWrap/TableWrap"
import SearchContainer from "@/components/search/SearchContainer"
import SearchFormItem from "@/components/search/SearchFormItem"
import { getTableData } from "@/apis/index"
import useFormModal from "@/hooks/useFormModal"
import TestModal from "./components/TestModal"
import View from "./components/View"
import { getOdOrderStatus } from "./filter"
import { useAntdTable } from "ahooks"
function Test001() {
  // 处理antdTable表格需要的数据
  const fetchData = ({ current, pageSize }) => {
    const searchParams = searchRef.current?.form.getFieldsValue()
    const params = { ...searchParams, date: searchParams.date?.format("YYYY-MM-DD") }
    return getTableData({
      ...params,
      pageSize,
      pageNo: current
    }).then((res) => {
      res.data.forEach((item) => {
        item.key = item.orderNo
      })
      return {
        total: +res.total,
        list: res.data
      }
    })
  }
  // 获取Search组件form实例
  const searchRef = useRef(null)

  const { tableProps, search } = useAntdTable(fetchData, {
    loadingDelay: 60000,
    from: searchRef.current?.form
  })
  const { submit, reset } = search

  // 编辑
  const editFormModal = useFormModal({
    modal: {
      title: "编辑",
      width: 400
    },
    service: async (params) => {
      console.log(params)
      // return await setScroll({
      //   ...params
      // })
    }
  })

  // 查看
  const viewFormModal = useFormModal({
    modal: {
      title: "查看",
      width: 600
    }
  })
  const columns = [
    {
      title: "订单编号",
      dataIndex: "orderNo",
      key: "orderNo",
      ellipsis: {
        showTitle: false
      },
      render: (orderNo) => (
        <Tooltip placement="topLeft" title={orderNo}>
          {orderNo}
        </Tooltip>
      )
    },
    {
      title: "学员姓名",
      dataIndex: "customerName",
      key: "customerName"
    },
    {
      title: "下单时间",
      dataIndex: "date",
      key: "date"
    },
    {
      title: "订单状态",
      dataIndex: "status",
      key: "status",
      render: (odOrderStatus) => (
        <>
          <Tag color={getOdOrderStatus(odOrderStatus).color}>
            {getOdOrderStatus(odOrderStatus).name}
          </Tag>
        </>
      )
    },
    {
      width: 120,
      title: "操作",
      key: "action",
      render: (_, record) => (
        <section className="flex">
          <div
            className="cursor-pointer text-#1677ff mr-8px"
            onClick={() => {
              viewFormModal.setVisible(true)
              viewFormModal.setFormData(record)
            }}
          >
            查看
          </div>
          <div
            className="cursor-pointer text-#1677ff"
            onClick={() => {
              editFormModal.setVisible(true)
              editFormModal.setFormData(record)
            }}
          >
            编辑
          </div>
        </section>
      )
    }
  ]

  return (
    <Page searchTableWrap={true}>
      <SearchContainer
        ref={searchRef}
        onConfirm={() => submit()}
        onClear={() => {
          searchRef.current?.form.resetFields()
          reset()
        }}
      >
        <SearchFormItem formItemProps={{ name: "orderNo", label: "订单编号" }}>
          <Input placeholder="请输入" />
        </SearchFormItem>
        <SearchFormItem formItemProps={{ name: "customerName", label: "学员姓名" }}>
          <Input placeholder="请输入" />
        </SearchFormItem>
        <SearchFormItem formItemProps={{ name: "date", label: "下单时间" }}>
          <DatePicker className="w-full" />
        </SearchFormItem>
        <SearchFormItem formItemProps={{ name: "status", label: "订单状态" }}>
          <Select
            options={[
              { label: "已发货", value: "Shipped" },
              { label: "待处理", value: "Pending" },
              { label: "已送达", value: "Delivered" }
            ]}
            placeholder="请选择"
          />
        </SearchFormItem>
      </SearchContainer>
      <TestModal {...editFormModal} />
      <View {...viewFormModal} />
      <TableWrap>
        <div className="px-10px mb-8px box-border">
          <Button type="primary" icon={<PlusOutlined />} iconPosition="end">
            新建
          </Button>
        </div>
        <DataTable columns={columns} {...tableProps} />
      </TableWrap>
    </Page>
  )
}
export default Test001
